import React from "react";
import {ModalForm, ProFormText} from "@ant-design/pro-form/es";
import {Space} from "antd";
import {ProFormDatePicker} from "@ant-design/pro-form/es";

const EmployeeInfoForm: React.FC = (props: any)=>{
  return (
    <ModalForm<Domain.Admin>
      title={props.title}
      trigger={props.trigger}
      autoFocusFirstInput
      modalProps={{
        onCancel: () => console.log('run'),
      }}
      onFinish={async (values) => {
        if (props.handleAdd)
          return await props.handleAdd(values)
        if (props.handleUpdate){
          const copied = Object.assign({}, values)
          for (const copiedKey in copied) {
            if (copiedKey!='account' && copied[copiedKey] === props.employee[copiedKey])
              copied[copiedKey] = null;
          }
          return await props.handleUpdate(copied)
        }
      }}
      layout="horizontal"
      labelCol={{span: 7}}
      wrapperCol={{span: 14}}
      initialValues={props.employee}
     >
      <Space direction={"vertical"} size={16}>
        <ProFormText
          width="md"
          name="account"
          label="账号"
          tooltip="10~15位的账号"
          placeholder="请输入账号"
          disabled={!!props.employee}
          required
        />


        <ProFormText.Password
          width="md"
          name="password"
          label="密码"
          placeholder="请输入密码"
          required
          hidden={!!props.employee}
        />


        <ProFormText
          width="md"
          name="name"
          label="姓名"
          placeholder="请输入姓名"
          required
        />

        <ProFormText
          width="md"
          name="phone"
          label="电话号码"
          placeholder="请输入11位电话号码"
          required
        />

        <ProFormText
          width="md"
          name="email"
          label="邮箱"
          placeholder="请输入邮箱地址"
        />

        <ProFormDatePicker
          name="birthday"
          label="出生日期"
          width="md"
          required
        />

        <ProFormDatePicker
          name="hireDate"
          label="录用日期"
          width="md"
          required
        />
      </Space>
    </ModalForm>
  );
}

export default EmployeeInfoForm;
